Table 標籤使用

component 在使用 Table 標籤的時候需要注意，因為普通使用標籤的時候可以直接的使用，但是 component 在使用的時候需要全部都包進去才行。

新增 component

Vue.component('my-row1', {
    //需要這樣全部包進來才能使用，如果單單使用 data 來放進 Table 會出現問題
    template: '<tr><td>(1)</td><td>第一</td></tr>'
});    
Vue.component('my-row2', {
    template: '<tr><td>(2)</td><td>第二</td></tr>'
});    
Vue.component('my-row3', {
    template: '<tr><td>(3)</td><td>第三</td></tr>'
});    
var myApp = new Vue({
    el: '#myApp', 
    data: {
    },
    methods: {
    },
});

再來是標籤的部分

<table border="1">
    <tr>
        <td>1</td>
        <td>原本的Table</td>
    </tr>
    // component 的 table
    <my-row1></my-row1>
    <my-row2></my-row2>
    <my-row3></my-row3>
</table>

是不是這樣就可以完整的呈現Table了呢！